<template>
  <div>
    <el-container>
<!--      <el-aside width="265px">-->
<!--        <div class="plr-4">-->
<!--          <div class="app_card mb-2 pt-4  pb-4" style="height:calc(100vh - 180px);overflow-y: scroll;">-->
<!--            <el-tree :data="dataOfGroups" node-key="id" :props="defaultProps" @node-click="onClickNode" />-->
<!--          </div>-->
<!--        </div>-->
<!--      </el-aside>-->
      <el-main v-show="!showRoom">
        <div class="app_card mb-2 pt-4  pb-4">
          <!-- 权限 -->
          <!-- v-if="authStore.hasCode('SysConfigs.save')" -->
          <div class="d-flex justify-content-between">
            <div class="flex-grow-1">
              <el-radio-group class="radio_button" v-model="radioFloor" @change="floorChange">
                <el-radio-button label="-1">全部</el-radio-button>
                <el-radio-button label="-2">上课中</el-radio-button>
                <el-radio-button label="-3">故障教室</el-radio-button>
              </el-radio-group>
              <el-radio-group class="radio_button ml-5" v-model="buttonType" @change="buttonTypeChange" v-show="radioSelect=='1'">
                <el-radio-button label="-2">上课</el-radio-button>
                <el-radio-button label="-1">下课</el-radio-button>
              </el-radio-group>
            </div>
            <div class="d-flex">
              <el-radio-group v-model="radioIcon" @change="switchIcon" v-show="radioSelect=='2'">
                <el-radio label="1">大图</el-radio>
                <el-radio label="2">小图</el-radio>
              </el-radio-group>
              <el-radio-group class="ml-5" v-model="radioSelect" @change="switchSelect">
                <el-radio label="1">列表控制</el-radio>
                <el-radio label="2">面板控制</el-radio>
                <el-radio label="3">物联控制</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>

        <!-- 列表控制 -->
        <ListControl v-show="radioSelect=='1'" ref="listControlRef" @goIot="goIot"></ListControl>
        <!-- 面板控制 -->
        <PanelControl v-show="radioSelect=='2'" ref="panelControlRef"></PanelControl>
        <!-- 物联控制 -->
        <IoTInformation v-show="radioSelect=='3'" ref="ioTInformationRef" @goRoom="goRoom"></IoTInformation>
      </el-main>
      <!-- 教室详情 -->
      <el-main v-show="showRoom">
        <ClassroomDetails ref="classroomDetailsRef" @goClass="goClass"></ClassroomDetails>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
/**
 * 教室管理
 */
import { ref, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import useAuthStore from '@/stores/useAuthStore';

//组件
import ListControl from './ListControl.vue';
import IoTInformation from './IoTInformation.vue';
import PanelControl from './PanelControl.vue';
import ClassroomDetails from './ClassroomDetails.vue';

// ======================================================
//                      变量声明
// ======================================================





const authStore = useAuthStore();
// 组件引用
const classroomDetailsRef = ref(null);
const listControlRef = ref(null);
const panelControlRef = ref(null);
const ioTInformationRef = ref(null);
// 教室分组数据
const dataOfGroups = ref([]);
const defaultProps = {
  children: 'children',
  label: 'label',
}

// 表格查询参数
const queryParam = ref({
  radio_floor: null,
  button_type: null,
  class_id: null,//选中教室id
  radio_icon: '1',//大图小图
})
// 分页栏配置数据
const showRoom = ref(false);
const radioFloor = ref('-1');
const buttonType = ref('-2');
const radioIcon = ref('1');
const radioSelect = ref('2');


// ======================================================
//                      点击操作
// ======================================================
const floorChange = () => {
  if (radioFloor.value == "-2") {//上课
  } else if (radioFloor.value == "-3") {//故障教室
  } else if (radioFloor.value == "-1") {//全部
  } else {

  }
}
const buttonTypeChange = () => {
  if (radioFloor.value == "-2") {//上课
  } else if (radioFloor.value == "-1") {//下课
  } else {

  }
}
const switchIcon = () => {
  loadData();

}
const goIot = () => {
  radioSelect.value = '3'
  loadData();
}
const goRoom = (row) => {
  showRoom.value = true
  classroomDetailsRef.value.loadData();
}
const goClass = (row) => {
  showRoom.value = false
}

//切换教室模式
const switchSelect = () => {
  loadData();
}


// 点击分组树形节点
const onClickNode = (data) => {
  console.log('点击树形节点', data)
  queryParam.value.class_id = data.id;
  loadData();




}



// ======================================================
//                      处理事件
// ======================================================

const loadTreeData = () => {
  EsAjax.post(ApiUrls.roomData).then(res => {
    console.error('res====', res)
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    dataOfGroups.value = res.data.data;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}
const loadData = () => {
  queryParam.value.radio_icon = radioIcon.value
  if (radioSelect.value == '1') {//列表控制
    listControlRef.value.loadData(queryParam.value);
  } else if (radioSelect.value == '2') {//面板控制
    panelControlRef.value.loadData(queryParam.value);
  } else if (radioSelect.value == '3') {//物联控制
    ioTInformationRef.value.loadData(queryParam.value);
  }


}


onMounted(() => {
  loadData();
  loadTreeData();
})

</script>
<style lang="less">
</style>

